<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>用户信息</title>

  <link rel='stylesheet' type="text/css" th:href="@{/css/bootstrap.min.css}">
  <link rel="stylesheet" type="text/css" th:href="@{/css/header.css}">
  <link rel='stylesheet' type="text/css" th:href="@{https://use.fontawesome.com/releases/v5.0.10/css/all.css}">
  <link rel="stylesheet" type="text/css" th:href="@{/css/home.css}">
  <link rel="stylesheet" type="text/css" th:href="@{/css/imageUpload.css}">

</head>

<body>
<!-- 使用 th:replace 指令引入通用模板 -->
<div th:replace="header :: header"></div>

  <!-- partial:index.partial.html -->
  <div class="container-ui">
    <div class="leftbox">
      <nav>
        <a id="userInfo" class="active"><i class="fa fa-user"></i></a>
        <a id="changePassword"><i class="fa fa-lock"></i></a>
        <a id="avatarUpload"><i class="fa fa-solid fa-image"></i></a>
<!--        <a id="privacy"><i class="fa fa-tasks"></i></a>-->
<!--        <a id="settings"><i class="fa fa-cog"></i></a> -->
      </nav>
    </div>
    <div class="rightbox msg-box">
      <div class="userInfo">
        <h2>用户信息</h2>
          <div class="user-box">
            <label>用户名</label>
            <input type="text" id="username" name="username" required="" th:value="${user?.username}">
            <div class="error-message" id="error-message-username"></div>
          </div>
          <div class="user-box">
            <label>邮箱</label>
            <input type="text" id="email" name="email" required="" th:value="${user?.email}">
            <div class="error-message" id="error-message-email"></div>

          </div>
          <div class="user-box">
            <label>地址</label>
            <input type="text" id="address" name="address" required="" th:value="${user?.address}">
          </div>
          <a href="#" onclick="updateUserInfo()">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            保存
          </a>
      </div>
      <div class="changePassword noshow">
        <h2>修改密码</h2>
        <form>
          <div class="user-box">
            <label>旧密码</label>
            <input type="text" id="oldPassword" name="oldPassword" required="" value="153">
            <div class="error-message" id="oldPassword-error"></div>

          </div>
          <div class="user-box">
            <label>新密码</label>
            <input type="text" id="newPassword" name="newPassword" required="">
            <div class="error-message" id="newPassword-error"></div>

          </div>
          <div class="user-box">
            <label>确认新密码</label>
            <input type="text" id="confirmNewPassword" name="confirmNewPassword" required="">
            <div class="error-message" id="confirmNewPassword-error"></div>

          </div>
          <a href="#" onclick="savePassword()" >
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            保存
          </a>
        </form>
      </div>
      <div class="avatarUpload noshow">
        <div id="profile-picture">
          <div id="drag-area">
            <div id="clone-container"></div>
<!--            <img id="photo" th:src="@{/avatars/user.jpg}">-->
            <img id="photo" >
            <div id="crop-circle">
              <div id="circle-center"></div>
              <div id="circle-thirds">
                <span class="top-horizontal"></span>
                <span class="bottom-horizontal"></span>
                <span class="left-vertical"></span>
                <span class="right-vertical"></span>
              </div>
            </div>
          </div>
          <div class="photo-options">
            <div class="option-buttons">
<!--              <button id="reset-all">Reset everything</button>-->
              <input type="file" id="imageUpload" accept=".png, .jpg, .jpeg">
              <button id="preview-btn">上传照片</button>
            </div>
            <fieldset>
              <legend>Scale</legend>
              <div class="option-slider">
                <input type="range" id="scale-slider" min="1" max="3" step="0.01" value="1">
                <input type="number" id="scale-input" min="1" max="3" step="0.01" value="1">
                <button id="scale-reset" value="1">Reset</button>
              </div>
            </fieldset>
<!--            <fieldset>-->
<!--              <legend>Rotate</legend>-->
<!--              <div class="option-slider">-->
<!--                <input type="range" id="rotate-slider" min="-180" max="180" step="1" value="0">-->
<!--                <input type="number" id="rotate-input" min="-180" max="180" step="1" value="0">-->
<!--                <button id="rotate-reset" value="0">Reset</button>-->
<!--              </div>-->
<!--            </fieldset>-->
<!--            <fieldset>-->
<!--              <legend>Preview</legend>-->
<!--              <div id="preview-container"></div>-->
<!--            </fieldset>-->
          </div>
        </div>

      </div>


    </div>
  </div>
  <!-- partial -->
<script th:src="@{/js/jquery-3.6.0.min.js}"></script>
<script th:src="@{/js/header.js}"></script>
<script th:src="@{/js/home.js}"></script>
<script th:src="@{https://html2canvas.hertzen.com/dist/html2canvas.min.js}"></script>
<script  th:src="@{/js/imageUpload.js}"></script>

<!--<script th:src="@{/js/prefixfree.min.js}"></script>-->

<!--1111111-->

</body>

</html>